import { View } from '@tarojs/components';
import Taro, { pxTransform } from '@tarojs/taro';
import { useEffect, useState } from 'react';

import './index.module.scss';

export type NavHeaderProps = {
  title: string;
};

const NavHeader: React.FC<NavHeaderProps> = ({ title }) => {
  const [headerHeight, setHeaderHeight] = useState(48); // 默认高度48px

  useEffect(() => {
    const menuButton = Taro.getMenuButtonBoundingClientRect();
    const systemInfo = Taro.getSystemInfoSync();
    // 胶囊高度 + 状态栏高度 + 上下边距
    const totalHeight =
      menuButton.height + (systemInfo.statusBarHeight || 20) + 8;
    setHeaderHeight(totalHeight);
  }, []);

  return (
    <View className='nav-header' style={{ height: pxTransform(headerHeight) }}>
      <View className='nav-title'>{title}</View>
    </View>
  );
};

export default NavHeader;
